<template>
  <div class="roleWrap" v-loading="loading">
    <div class="flex_start mb-1">
      <el-button type="primary" :icon="'Plus'" @click="addDataFunc">新增</el-button>

      <el-upload
        ref="upload"
        class="upload_com"
        :action="`${baseApiUrl}api/sourceManager/importRoadBasicJson`"
        :headers="headers"
        :limit="1"
        accept="json"
        :auto-upload="true"
        :before-upload="beforeUpload"
        :on-change="uploadDataFunc"
        :on-success="uploadSuc"
      >
        <template #trigger>
          <el-button type="primary" :icon="'Upload'">导入</el-button>
        </template>
      </el-upload>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column type="index" width="50" :index="indexMethod" />
      <el-table-column prop="name" align="center" label="数据名称" width="180" />
      <el-table-column prop="source" align="center" label="数据来源" width="180" />
      <el-table-column prop="createTime" align="center" label="创建时间" width="180" />
      <el-table-column prop="remark" align="center" label="描述" />

      <el-table-column prop="action" label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="updateDataFunc(scope.$index, scope.row)"
            >编辑</el-button
          >

          <el-popconfirm title="确定删除吗?" @confirm="deleteDataFunc(scope.row.id)">
            <template #reference>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="mt-10"
      @current-change="changePage"
      :current-page="listParams.pageNum"
      :page-size="listParams.pageSize"
      background
      layout="prev, pager, next"
      :total="total"
      hide-on-single-page
    />

    <el-dialog
      v-model="centerDialogVisible"
      :title="isUpdate ? '更新数据源' : '新增数据源'"
      width="40%"
      align-center
    >
      <p class="iptwrap flex_start">
        <span class="span">数据名称：</span>
        <el-input v-model="sizeForm.name" placeholder="请输入数据名称" clearable class="iptwidth" />
      </p>
      <p class="iptwrap flex_start">
        <span class="span">数据来源：</span>
        <el-input
          v-model="sizeForm.source"
          placeholder="请输入数据来源"
          clearable
          class="iptwidth"
        />
      </p>
      <p class="iptwrap flex_start">
        <span>备注信息：</span>
        <el-input
          v-model="sizeForm.remark"
          placeholder="请输入备注信息"
          clearable
          class="iptwidth"
        />
      </p>
      <p class="iptwrap flex_start">
        <span class="span">数据源管理：</span>
        <el-select v-model="sizeForm.type" readonly placeholder="请选择数据源管理" class="iptwidth">
          <el-option
            v-for="item in sourceType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </p>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreate" v-if="!isUpdate"> 确定 </el-button>
          <el-button type="primary" @click="confirmUpdate" v-if="isUpdate"> 更新 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script >
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import {
  dataSorceList,
  dataSorceAdd,
  dataSorceUpdate,
  dataSorceDelete,
  importRoadBasicJson,
} from '@/api/system/log/index.ts';
import { Storage } from '@/utils/Storage';
import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';
import { ElMessage, ElLoading } from 'element-plus';
const indexMethod = (index) => {
  return index * 2;
};
export default defineComponent({
  setup() {
    const upload = ref();
    const loading = ref(false);
    const baseApiUrl = process.env.VUE_APP_BASE_API;
    const token = Storage.get(ACCESS_TOKEN_KEY);

    const state = reactive({
      tableData: [],
      isUpdate: false,
      upload,
      loading,
      centerDialogVisible: false,
      sizeForm: {
        name: '',
        source: '',
        remark: '',
        type: '0',
      },
      baseApiUrl,
      headers: {
        Authorization: token,
      },
      sourceId: '',
      sourceType: [
        {
          value: '0',
          label: '路网基础信息',
        },
      ],
      listParams: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 1,
    });
    const queryDataList = () => {
      dataSorceList(state.listParams).then((res) => {
        const { rows, total } = res;
        state.total = total;
        state.tableData = rows;
      });
    };
    const addDataFunc = () => {
      state.isUpdate = false;
      state.centerDialogVisible = true;
    };

    const uploadDataFunc = (e, uploadFile) => {};
    const uploadSuc = (suc) => {
      state.loading = false;
      state.upload.clearFiles();
    };
    const beforeUpload = (e) => {
      state.loading = true;
      const filetype = e.name?.split('.')[1];
      //   console.log("filetype",filetype);
      if (filetype != 'json') {
        ElMessage({
          message: '请上传json文件',
          type: 'warning',
        });
        return false;
      }
    };
    const updateDataFunc = (index, item) => {
      state.isUpdate = true;
      state.centerDialogVisible = true;
      state.sizeForm = {
        name: item.name,
        source: item.source,
        remark: item.remark,
        type: item.type,
      };
      state.sourceId = item.id;
    };
    const deleteDataFunc = (id) => {
      dataSorceDelete(id).then((res) => {
        ElMessage({
          message: '操作成功',
          type: 'success',
        });
        queryDataList();
      });
    };
    const confirmCreate = () => {
      if (!state.sizeForm.name || !state.sizeForm.source) {
        ElMessage({
          message: '请完善数据信息',
          type: 'warning',
        });
        return;
      }
      dataSorceAdd(state.sizeForm).then((res) => {
        ElMessage({
          message: '操作成功',
          type: 'success',
        });
        state.sizeForm = {
          name: '',
          source: '',
          remark: '',
          type: '0',
        };
        state.centerDialogVisible = false;
        queryDataList();
      });
    };
    const confirmUpdate = () => {
      if (!state.sizeForm.name || !state.sizeForm.source) {
        ElMessage({
          message: '请完善数据信息',
          type: 'warning',
        });
        return;
      }
      dataSorceUpdate({ ...state.sizeForm, id: state.sourceId }).then((res) => {
        ElMessage({
          message: '操作成功',
          type: 'success',
        });
        state.sizeForm = {
          name: '',
          source: '',
          remark: '',
          type: '0',
        };
        state.centerDialogVisible = false;
        queryDataList();
      });
    };
    const changePage = (val) => {
      state.listParams.pageNum = val;
      queryDataList();
    };

    onMounted(() => {
      queryDataList();
    });
    return {
      ...toRefs(state),
      queryDataList,
      addDataFunc,
      uploadDataFunc,
      updateDataFunc,
      deleteDataFunc,
      confirmCreate,
      confirmUpdate,
      beforeUpload,
      uploadSuc,
    };
  },
});
</script>
<style lang="less" scoped>
.roleWrap {
  :deep(.el-table) {
    background-color: transparent !important;
    font-size: 0.7vw;
    thead {
      color: #333 !important;
    }
    tr {
      background-color: transparent !important;
      color: #333;
    }
    tr:hover > td {
      background: rgba(255, 255, 255, 0.1) !important;
    }
    th {
      background-color: transparent !important;
      border-bottom: none !important;
      color: #333;
    }
    &::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
  }
  :deep(.el-table--enable-row-transition .el-popper .is-light) {
    background-color: rgba(255, 255, 255, 1) !important;
    border: 1px solid #fff !important;
  }
  :deep(.el-input__inner) {
    color: #333 !important;
  }
  .treeWrap {
    width: 40%;
  }
  .iptwrap {
    :deep(.el-input__inner) {
      color: #333 !important;
    }
    margin-bottom: 20px;
    width: 60%;
    .iptwidth {
      width: 80%;
    }
    .mb-2 {
      margin-bottom: 20px;
    }
    span {
      display: inline-block;
      width: 120px;
      text-align: right;
    }
    .span {
      &::before {
        content: '*';
        color: #f5222d;
      }
    }
  }
  .listItem {
    width: 80%;
    .itemRight {
      button {
        font-weight: 400;
      }
    }
  }
  :deep(.el-upload-list) {
    display: none;
  }
  .upload_com {
    margin-left: 10px;
  }
}
</style>
